<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Element-3</title>
	<!-- 导入样式 -->
	<!-- <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> -->
	<link rel="stylesheet" href="static/css/element2.css">
	<!-- 导入 Vue 3 -->
	<!-- <script src="//unpkg.com/vue@next"></script> -->
	<script src="static/js/vue.global.prod.js"></script>
	<!-- <script src="static/js/vue.global.js"></script> -->
	<!-- 导入组件库 -->
	<!-- <script src="//unpkg.com/element-plus"></script> -->
	<script src="static/js/element-plue2.js"></script>
	
	<script src="static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="static/css/index.css">
</head>
<style>
.a-system{
	text-decoration: none;
}
</style>
<body>
<div id="app" class="">
	<el-container class="layout-container-body" style="height: 100%">
		<!-- 头部 -->
		<el-header style="padding: 0px 40px 0px 0px;border-bottom: 1px solid #e6e6e6;margin-bottom: 8px;">
			<div class="layout-header">
				<div class="logo">
					<span class="span-logo">Bridgee 企桥</span>
					<!-- <img src="static/image/element-logo.png" alt=""> -->
				</div>
				<div class="cut">
					<el-menu :default-active="activeIndex" class="el-menu-cut" mode="horizontal" :ellipsis="false" @select="handleSelect">
						<el-menu-item index="1"><a class="a-system" href="index0.html">Element-3</a></el-menu-item>
						<el-menu-item index="2"><a class="a-system" href="../echarts/echarts.html">Echarts</a></el-menu-item>
						<el-menu-item index="3"><a class="a-system" href="../css/css.html">CSS</a></el-menu-item>
						<el-menu-item index="4"><a class="a-system" href="../antd/antd.html">Ant Design Vue</a></el-menu-item>
						
					</el-menu>
				</div>
				<div class="url"><a :href="main_url" target="_blank" style="text-decoration: none;color: #409EFF;margin-left: 12px;">单独打开</a></div>
				<div class="header-left"></div>
				<div class="toolbar">
					<el-menu :default-active="activeIndex2" class="el-menu-toolbar el-menu-cut" mode="horizontal" :ellipsis="false" @select="handleSelect2">
						<el-sub-menu index="2">
							<template #title>个人设置</template>
							<el-menu-item index="2-1">item one</el-menu-item>
							<el-menu-item index="2-2">item two</el-menu-item>
							<el-menu-item index="2-3">item three</el-menu-item>
							<el-sub-menu index="2-4">
								<template #title>item four</template>
								<el-menu-item index="2-4-1">item one</el-menu-item>
								<el-menu-item index="2-4-2">item two</el-menu-item>
								<el-menu-item index="2-4-3">item three</el-menu-item>
							</el-sub-menu>
						</el-sub-menu>
					</el-menu>
				</div>
				<div class="toolbar"><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></div>
				<div class="toolbar">
					<el-dropdown style="top: 3px;">
						<span class="el-dropdown-link">
							Admin <el-icon><arrow-down></arrow-down></el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item>Action 1</el-dropdown-item>
								<el-dropdown-item>Action 2</el-dropdown-item>
								<el-dropdown-item>Action 3</el-dropdown-item>
								<el-dropdown-item disabled>Action 4</el-dropdown-item>
								<el-dropdown-item divided>Action 5</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
					&nbsp;&nbsp;&nbsp;&nbsp;
					<el-icon class="logout" title="退出系统" @click="logout_fn">
						<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8=""><path fill="currentColor" d="M352 159.872V230.4a352 352 0 1 0 320 0v-70.528A416.128 416.128 0 0 1 512 960a416 416 0 0 1-160-800.128z"></path><path fill="currentColor" d="M512 64q32 0 32 32v320q0 32-32 32t-32-32V96q0-32 32-32z"></path></svg>
					</el-icon>
				</div>
			</div>
		</el-header>
		
		<el-container class="body-main">
			<!-- left -->
			<el-aside width="200px" :style="styleObj">
				<el-scrollbar :style="styleObj" style="background-color: white;">
					<el-button :style="styleObj" v-html="buttonText" @click="open_close"></el-button>
					<el-menu :default-openeds="['4', '3']" default-active="html" :collapse="isCollapse" :collapse-transition=false>
						
						<el-sub-menu index="1">
							<template #title>
								<el-icon>
									<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8=""><path fill="currentColor" d="M640 384v256H384V384h256zm64 0h192v256H704V384zm-64 512H384V704h256v192zm64 0V704h192v192H704zm-64-768v192H384V128h256zm64 0h192v192H704V128zM320 384v256H128V384h192zm0 512H128V704h192v192zm0-768v192H128V128h192z"></path></svg>
								</el-icon>
								<span>Basic 基础组件</span>
							</template>
							<el-menu-item index="base/button.html" @click="toPage">Button 按钮</el-menu-item>
							<el-menu-item index="base/border.html" @click="toPage">Border 边框</el-menu-item>
							<el-menu-item index="base/color.html" @click="toPage">Color 色彩</el-menu-item>
							<el-menu-item index="base/container/container.html" @click="toPage">Container 布局容器</el-menu-item>
							<el-menu-item index="base/icon.html" @click="toPage">Icon 图标</el-menu-item>
							<el-menu-item index="base/layout.html" @click="toPage">Layout 布局</el-menu-item>
							<el-menu-item index="base/link.html" @click="toPage">Link 链接</el-menu-item>
							<el-menu-item index="base/Scrollbar.html" @click="toPage">Scrollbar 滚动条</el-menu-item>
							<el-menu-item index="base/space.html" @click="toPage">Space 间距</el-menu-item>
							<el-menu-item index="base/Typography.html" @click="toPage">Typography 排版</el-menu-item>
						</el-sub-menu>
						
						<el-sub-menu index="2">
							<template #title>
								<el-icon><Tools></Tools></el-icon>
								<span>配置组件</span>
							</template>
							<el-menu-item index="config/ConfigProvider.html" @click="toPage">ConfigProvider 全局配置</el-menu-item>
						</el-sub-menu>
						
						<el-sub-menu index="3">
							<template #title>
								<el-icon><Document></Document></el-icon>
								<span>Form 表单组件</span>
							</template>
							<el-menu-item index="form/Autodcomplete.html" @click="toPage">Autodcomplete 自动补全输入框</el-menu-item>
							<el-menu-item index="form/Cascader.html" @click="toPage">Cascader 级联选择器</el-menu-item>
							<el-menu-item index="form/Checkbox.html" @click="toPage">Checkbox 多选框</el-menu-item>
							<el-menu-item index="form/ColorPicker.html" @click="toPage">ColorPicker 颜色选择器</el-menu-item>
							<el-menu-item index="form/DatePicker.html" @click="toPage">DatePicker 日期选择器</el-menu-item>
							<el-menu-item index="form/DateTimePicker.html" @click="toPage">DateTimePicker 日期时间选择器</el-menu-item>
							<el-menu-item index="form/Form1.html" @click="toPage">Form 表单</el-menu-item>
							<el-menu-item index="form/Input.html" @click="toPage">Input 输入框</el-menu-item>
							<el-menu-item index="form/InputNumber.html" @click="toPage">InputNumber数字输入框</el-menu-item>
							<el-menu-item index="form/Radio.html" @click="toPage">Radio 单选框</el-menu-item>
							<el-menu-item index="form/Rate.html" @click="toPage">Rate 评分</el-menu-item>
							<el-menu-item index="form/Select.html" @click="toPage">Select 选择器</el-menu-item>
							<el-menu-item index="form/SelectV2.html" @click="toPage">SelectV2 虚拟列表选择器</el-menu-item>
							<el-menu-item index="form/Slider.html" @click="toPage">Slider 滑块</el-menu-item>
							<el-menu-item index="form/Switch.html" @click="toPage">Switch 开关</el-menu-item>
							<el-menu-item index="form/TimePicker.html" @click="toPage">TimePicker 时间选择器</el-menu-item>
							<el-menu-item index="form/TimeSelect.html" @click="toPage">TimeSelect 时间选择</el-menu-item>
							<el-menu-item index="form/Transfer.html" @click="toPage">Transfer 穿梭框</el-menu-item>
							<el-menu-item index="form/Upload.html" @click="toPage">Upload 上传</el-menu-item>
						</el-sub-menu>
						
						<el-sub-menu index="4">
							<template #title>
								<el-icon><data-line></data-line></el-icon>
								<span>Data 数据展示</span>
							</template>
							<el-menu-item index="data/table/Table1.html" @click="toPage">Table 表格</el-menu-item>
							<el-menu-item index="data/Avatar.html" @click="toPage">Avatar 头像</el-menu-item>
							<el-menu-item index="data/Badge.html" @click="toPage">Badge 徽章</el-menu-item>
							<el-menu-item index="data/Calendar.html" @click="toPage">Calendar 日历</el-menu-item>
							<el-menu-item index="data/Card.html" @click="toPage">Card 卡片</el-menu-item>
							<el-menu-item index="data/Carousel.html" @click="toPage">Carousel 走马灯</el-menu-item>
							<el-menu-item index="data/Collapse.html" @click="toPage">Collapse 折叠面板</el-menu-item>
							<el-menu-item index="data/Descriptions.html" @click="toPage">Descriptions 描述列表</el-menu-item>
							<el-menu-item index="data/Empty.html" @click="toPage">Empty 空状态</el-menu-item>
							<el-menu-item index="data/Image.html" @click="toPage">Image 图片</el-menu-item>
							<el-menu-item index="data/InfiniteScroll.html" @click="toPage">InfiniteScroll 无限滚动</el-menu-item>
							<el-menu-item index="data/Pagination.html" @click="toPage">Pagination 分页</el-menu-item>
							<el-menu-item index="data/Progress.html" @click="toPage">Progress 进度条</el-menu-item>
							<el-menu-item index="data/Result.html" @click="toPage">Result 结果</el-menu-item>
							<el-menu-item index="data/Skeleton.html" @click="toPage">Skeleton 骨架屏</el-menu-item>
							<el-menu-item index="data/Tag.html" @click="toPage">Tag 标签</el-menu-item>
							<el-menu-item index="data/Timeline.html" @click="toPage">Timeline 时间线</el-menu-item>
							<el-menu-item index="data/Tree.html" @click="toPage">Tree 树形控件</el-menu-item>
							<el-menu-item index="data/TreeV2.html" @click="toPage">TreeV2 虚拟化树形控件</el-menu-item>
							<el-menu-item index="data/VirtualizedTable.html" @click="toPage">VirtualizedTable 虚拟化表格</el-menu-item>
						</el-sub-menu>
						
						<el-sub-menu index="5">
							<template #title>
								<el-icon><Guide></Guide></el-icon>
								<span>Navigation 导航</span>
							</template>
							<el-menu-item index="navigation/affix.html" @click="toPage">Affix 固钉</el-menu-item>
							<el-menu-item index="navigation/Backtop.html" @click="toPage">Backtop 回到顶部</el-menu-item>
							<el-menu-item index="navigation/Breadcrumb.html" @click="toPage">Breadcrumb 面包屑</el-menu-item>
							<el-menu-item index="navigation/Dropdown.html" @click="toPage">Dropdown 下拉菜单</el-menu-item>
							<el-menu-item index="navigation/Menu1.html" @click="toPage">Menu 菜单1</el-menu-item>
							<el-menu-item index="navigation/Menu2.html" @click="toPage">Menu 菜单2</el-menu-item>
							<el-menu-item index="navigation/Menu3.html" @click="toPage">Menu 菜单3</el-menu-item>
							<el-menu-item index="navigation/PageHeader.html" @click="toPage">PageHeader 页头</el-menu-item>
							<el-menu-item index="navigation/Steps.html" @click="toPage">Steps 步骤条</el-menu-item>
							<el-menu-item index="navigation/Tabs.html" @click="toPage">Tabs 标签页</el-menu-item>
						</el-sub-menu>
						
						<el-sub-menu index="6">
							<template #title>
								<el-icon><Headset></Headset></el-icon>
								<span>Feedback 反馈组件</span>
							</template>
							<el-menu-item index="feedback/Alert.html" @click="toPage">Alert 提示</el-menu-item>
							<el-menu-item index="feedback/Dialog.html" @click="toPage">Dialog 对话框</el-menu-item>
							<el-menu-item index="feedback/Drawer.html" @click="toPage">Drawer 抽屉</el-menu-item>
							<el-menu-item index="feedback/Loading.html" @click="toPage">Loading 加载</el-menu-item>
							<el-menu-item index="feedback/Message.html" @click="toPage">Message 消息提示</el-menu-item>
							<el-menu-item index="feedback/MessageBox.html" @click="toPage">MessageBox 消息弹框</el-menu-item>
							<el-menu-item index="feedback/Notification.html" @click="toPage">Notification 通知</el-menu-item>
							<el-menu-item index="feedback/Popconfirm.html" @click="toPage">Popconfirm 气泡确认框</el-menu-item>
							<el-menu-item index="feedback/Popover.html" @click="toPage">Popover 弹出框</el-menu-item>
							<el-menu-item index="feedback/Tooltip.html" @click="toPage">Tooltip 文字提示</el-menu-item>
						</el-sub-menu>
						
						<el-sub-menu index="7">
							<template #title>
								<el-icon><Opportunity></Opportunity></el-icon>
								<span>Others 其他</span>
							</template>
							<el-menu-item index="others/Divider.html" @click="toPage">Divider 分割线</el-menu-item>
						</el-sub-menu>
					</el-menu>
				</el-scrollbar>
			</el-aside>

			<el-main>
				<!-- main -->
				<el-scrollbar>
					<div class="layui-body" id="iframe_div" style="bottom: 0px;">
						<iframe :src="main_url" id="iframe_body" frameborder="0" width="100%" height="100%"></iframe>
					</div>
				</el-scrollbar>
			</el-main>
		</el-container>
	</el-container>
</div>

</body>
<script>
const Main = {
	data() {
		return {
			main_url: "base/button.html",
			isCollapse: false,
			isTrue: true,
			styleObj: {width: '200px'},
			buttonText: "收起",
			activeIndex: '1',
			activeIndex2: '1'
		}
	},
	methods: {
		toPage(ret){
			// console.log(ret);
			// console.log(ret.index);
			this.main_url = ret.index;
		},
		handleSelect(key, keyPath){
			console.log(key);
			console.log(keyPath);
		},
		handleSelect2(key, keyPath){
			console.log(key);
			console.log(keyPath);
		},
		open_close(){
			// this.isCollapse = !this.isCollapse;
			if(this.isCollapse){
				//收起的，需要展开
				this.isCollapse = false;
				this.styleObj = {width: '200px'};
				this.buttonText = "收起";
				// console.log("展开了。。。")
			}else{
				//展开的，需要收起
				this.isCollapse = true;
				this.styleObj = {width: '64px'};
				this.buttonText = "展开";
			}
			// console.log(this.isCollapse);
		},
		logout_fn(){
			alert('logout');
		},
		
	}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>
